﻿<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>来我康康中午吃啥</title>
</head>

<style>
	body{background-color: #f9e0e4}
	.main{
		width: 800px;
		height: 800px;
		background:url('img/bg.png')no-repeat;
		background-size: 800px;
		margin: 300px auto;
	}
	.text{
		width: 180px;
		height: 100px;
		color: #fff;
		font-weight:bold;
		font-size: 80px;
		margin:110px 560px auto;
		text-align: center;
		cursor: pointer;
	}
	.button{
		width: 180px;
		height: 100px;
		color: #fff;
		font-weight:bold;
		font-size: 80px;
		position: relative;
		left: 50px;
		top: 210px;
		text-align: center;
		cursor: pointer;
		/*background: #666;*/
	}
	.name{
		position: relative;
		/*background: #999;*/
		left: 50%;
		top: 180px;
		width: 400px;
		height: 100px;
		color:#fff;
		font-weight:bold;
		font-size: 80px;
		text-align: center;
		margin-left: -200px;
	}

</style>

<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>

<body>

<div class="main">
	<div class="button"><span>开始</span></div>
	<div class="text">吃啥</div>
	<div class="name"><span id='ko'>烤盘饭</span></div>
</div>

<script>
 names=['裤带面','兰州拉面','张亮麻辣烫','锡纸米线','馋嘴鱼','配菜大米','二麻辣拌','三麻辣拌','饺子','拌面',
         '炒米饭','三麻辣烫','烤盘饭','螺蛳粉','烤肉拌饭','牛肉丸子面','大魔王','瓦香鸡','武汉热干面',''];
 $('.button').toggle(
	function(){
		//alert(names.length);
	$(this).css({'color':'#fff'}).html('停止');
	ydm=setInterval(function(){
	index=Math.floor(Math.random()*names.length);
	val=names[index];
	$('#ko').css({'color':'#fff'}).html(val);
	},50)},
	function(){
		$(this).css({'color':'#fff'}).html('开始');
		$('#ko').css({'color':'#fff'});
		clearInterval(ydm);
	}
 );
	
</script>

</body>
</html>